<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <nav class="nav">
        <a class="logo" href="javascript:;">
            <i class="iconfont icon-quanbufenlei"></i>
            <span>新世界</span>
        </a>
        <div class="navList">
            <li>首页</li>
            <li>最新活动</li>
            <li>项目介绍</li>
            <li>爱心社区</li>
            <li>关于我们</li>
            <li>
                <i class="iconfont icon-wode"></i>
                登录
            </li>
        </div>
    </nav>
    <section class="banner">
        <img src="./image/1.png" alt="">
        <div class="mask"></div>
        <div class="content">
            <div class="container">
                <div class="text">
                    <strong>Time of new life</strong>
                    <span>
                        新时代，年轻的人们让我们一起
                        <br> 体验新生活，享受新生活
                    </span>

                </div>
                <div class="button">
                    开始体验
                </div>
            </div>

        </div>
    </section>
    <section class="slogen">
        <div class="col-25">
            <i class="iconfont icon-301"></i>
            <span class="clearLeftBorder">
                打造全新世界观，让你更爱你的生活
            </span>
        </div>
        <div class="col-25">
            <i class="iconfont icon-jiaotong"></i>
            <span class="">
                丰富多彩的公益活动，发挥新世界的主人公意识
            </span>
        </div>
        <div class="col-25">
            <i class="iconfont icon-dianying"></i>
            <span class="">
                时尚的新理念，超前体验未知的生活
            </span>
        </div>
        <div class="col-25">
            <i class="iconfont icon-erweima"></i>
            <span class="clearRightBorder">
                完善的培养机制，培养你全新的世界观
            </span>
        </div>
    </section>

    <section class="middleQuestion">
        <i class="iconfont icon-shoucang"></i>
        <span class="text">关于新世界，你不知道的还有什么？</span>
    </section>
    <section class="search">
        <img src="./image/看地图.png" alt="">
        <div class="mask"></div>
        <div class="content">
            <div class="title">查询新世界城市活动信息</div>

            <div class="subtitle">每个城市的有不同的活动信息，请自主查询您所需要了解的城市</div>

            <form action="">
                <div class="formItem">
                    <input class="select" value="Zhon" readonly/>
                    <i class="dropDown"></i>
                    <ul class="options">
                        <li>中国</li>
                    </ul>
                </div>
                <div class="formItem">
                    <input class="select" value="Zhon" readonly/>
                    <i class="dropDown"></i>
                    <ul class="options">
                        <li>中国</li>
                    </ul>
                </div>
                <div class="formItem">
                    <input class="select" value="Zhon" readonly/>
                    <i class="dropDown"></i>
                    <ul class="options">
                        <li checked>广东省</li>
                        <li>辽宁省</li>
                        <li>河北省</li>
                        <li>河南省</li>
                        <li>河南省</li>
                        <li>河南省</li>
                        <li>河南省</li>
                        <li>河南省</li>
                        <li>河南省</li>
                    </ul>
                </div>
                <div class="formItem">
                    <input class="select" value="Zhon" readonly/>
                    <i class="dropDown"></i>
                    <ul class="options">
                        <li>中国</li>
                    </ul>
                </div>
            </form>
        </div>
    </section>

    <section class="activity">
        <section class="item">
            <div class="text">
                <strong>北京活动</strong>
                <br>
                <span>新社区大联盟</span>
            </div>
            <div class="img">
                <img src="./image/pic_20.jpg" alt="" srcset="">
            </div>
        </section><!--
        --><section class="item">
            <div class="img">
                <img src="./image/pic_17.jpg" alt="" srcset="">
            </div>
            <div class="text">
                <strong class="large">上 海 活 动</strong><br>
                夜上海新景观探索
            </div>
        </section><!--
        --><section class="item">
                <div class="text">
                    <strong>深圳活动</strong>
                    <br>
                    <span>全新海岸线观点站</span>
                </div>
            <div class="img">
                <img src="./image/pic_14.jpg" alt="" srcset="">
            </div>
        </section><!--
        --><section class="item">
                <div class="text">
                    <strong>香港活动</strong>
                    <br>
                    <span>奢侈消费大派送</span>
                </div>
            <div class="img">
                <img src="./image/pic_11.jpg" alt="" srcset="">
            </div>
        </section>
    </section>
    <section class="NewWorld">
        <section class="pic">
            <section class="mask">
                <h2>新世界</h2>
                <h1>TIME</h1>
                <p>
                    @新世界-北京<br>
                    2016.04.01
                </p>
            </section>
        </section><!--
        --><section class="info">
            <section class="content">
                <header>
                    <span>新世界</span> / <span class="c-red">01</span>
                </header>
                <p>
                    新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界
                    新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界
                    新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界
                </p>
                <div class="button">
                    查看详情
                </div>
                <div class="sec">
                    <span class="full"></span>
                    <span></span>
                    <span></span>
                </div>
            </section>
        </section>

    </section>

    <section class="ViewMore">
        <section class="first">
            <div class="content">
                <header> 新时代 <br> 关于爱生活的我们 </header>
                <hr>
                <div class="button">查看更多</div>
            </div>
        </section><!--
        --><section class="second">
            <div class="content">
                <header> 新时代 <br> 关于爱生活的我们 </header>
                <hr>
                <div class="button">查看更多</div>
            </div>
        </section><!--
        --><section class="img"></section>
    </section>
    <section class="joinUs">
        <header>
            <div class="title">成为我们的支援者</div>
            <hr>
            <div class="sub">
                世界的大家庭需要每一个爱生活的人加入，如果你够年轻，有梦想，有激情<br>
                那就不要犹豫，快来加入我们，成为改变所有人生活的人。
            </div>
        </header>
        <section>
            <div class="agreement">
                <section>
                    <div class="t">新世界志愿者协议</div>
                    <div class="content">
                        加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则 
                    </div>
                </section>
                <section>
                    <div class="t">新世界志愿者权利</div>
                    <div class="content">
                        加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则 
                    </div>
                </section>

                <section>
                    <div class="t">更多条款</div>
                    <div class="content">
                        加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则 
                    </div>
                </section>
            </div>
            <form action="">
                <input type="text" name="name" placeholder="姓名："><!--
                --><input type="text" name="age" placeholder="年龄："><!--
                --><input type="text" name="tel" placeholder="联系方式："><!--
                --><input type="text" name="address" placeholder="地址："><!--
                --><textarea  placeholder="请你简单描述你的生活"></textarea><!--
                --><button>提交</button>
            </form>
        </section>
    </section>
    <section class="contactUs">
        <h2>联系我们</h2>
        <p>为了更好地获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br>也可以通过以下任何联系方式关注我们动态</p>
        <form>
            <input type="email" placeholder="someone@email.com"><input type="button" value="提 交">
        </form>
        <div class="link">
            <a href="javascript:void;">
                <img src="./image/weibo.png" alt="" srcset="">
            </a>
            <a href="javascript:void;">
                <img src="./image/twitter.png" alt="" srcset="">
            </a>
            <a href="javascript:void;">
                <img src="./image/qq.png" alt="" srcset="">
            </a>
            <a href="javascript:void;">
                <img src="./image/web.png" alt="" srcset="">
            </a>
        </div>
    </section>
    <footer>
        <div class="Copyright">
            ©2016新世界
        </div>
        <div class="backup">
            <a href="#">Back to Up</a>
        </div>
    </footer>
</body>

</html>